﻿﻿<!DOCTYPE html>

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>录音</title>
</head>
<body>
       <style>
        html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
            margin: 0;
            padding: 0;
            border: 0;
            outline: 0;
            font-size: 100%;
            vertical-align: baseline;
            background: transparent;
            box-sizing: border-box;
        }

        .recordBox, .playBox, .recordHandleBox div, .playHandleBox div {
            background: #FFA831;
            color: #fff;
            padding: 5px 10px;
            border-radius: 20px;
            cursor: pointer;
            font-size: 14px;
            float: left;
        }
                .recordHandleBox, .playHandleBox {
            display: none;
        }
        .recordHandleBox, .playHandleBox {
            margin-left: 30px;
            margin-bottom: 20px;
            overflow: hidden;
        }
        .disBtn {
            background-color: #ccc !important;
        }
    </style>
    <div style="overflow:hidden;margin-bottom:20px;margin-left:30px;"><div class="recordBox" style="margin-top:5px;">录音</div> <div class="curRecorderBox" style="margin-left:30px;float:left;height:40px;"><audio class="audio" src="' + FilePath + '" style="height:100% ;outline:none;" controls>请升级浏览器</audio></div></div>
    <div class="recordHandleBox"><div id="pauseRecord">暂停录音</div><div class="disBtn" id="resumeRecord">恢复录音</div><div id="endRecord">停止录音</div><div class="countDown" style="color:#e4393c;float:left;background:#fff;">还可录制5分</div></div>
     <script src="./jquery-1.10.2.min.js"></script>
    <script src="./recorder.mp3.min.js"></script>
<!-- （注意：需要在https等安全环境下才能进行录音） -->
    <script>
        $(function () {
            var base64str = '';//音频数据
            var bolbSrc = '';//录音bolb路径
            var timer = '';//录音倒计时定时器
            var maxtime = 5 * 60; // 录音倒计时五分钟
            var recorder;
            //录音倒计时
            function CountDown() {
                if (maxtime >= 1) {
                    minutes = Math.floor(maxtime / 60);
                    seconds = Math.floor(maxtime % 60);
                    if (minutes == 0) {
                        msg = "还可录制" + seconds + "秒";
                    } else if (seconds == 0) {
                        msg = "还可录制" + minutes + "分";
                    } else {
                        msg = "还可录制" + minutes + "分" + seconds + "秒";
                    }
                    $('.countDown').text(msg)
                    --maxtime;
                } else {
                    setRecorderFinish()
                    alert("时间到，录音结束!");
                }
            }
            
          //  $.getScript("recorder.mp3.min.js", function () {
                recorder = Recorder({ type: "mp3", sampleRate: 16000, bitRate: 16 });//录音初始化
                console.log(recorder)
           // });
            $('.recordBox').click(function () {//录音按钮点击 开始录音 显示暂停 和停止按钮
                recorder.open(function () {//打开麦克风授权获得相关资源
                    //dialog&&dialog.Cancel(); 如果开启了弹框，此处需要取消
                    if ($(this).hasClass('disBtn') == false) {
                        recorder.start();//开始录音
                        if (timer) {
                            clearInterval(timer);//清空倒计时
                        }
                        timer = setInterval(CountDown, 1000);
                        $('.recordHandleBox').show();
                        $(this).addClass('disBtn');
                        $('.playBox').addClass('disBtn');
                    }

                }, function (msg, isUserNotAllow) {//用户拒绝未授权或不支持
                    //dialog&&dialog.Cancel(); 如果开启了弹框，此处需要取消
                    alert(msg);
                    console.log((isUserNotAllow ? "UserNotAllow，" : "") + "无法录音:" + msg);
                });
            })
            $('#pauseRecord').click(function () {//录音暂停按钮点击 显示恢复按钮
                if ($(this).hasClass('disBtn') == false) {
                    $(this).addClass('disBtn');
                    $('#resumeRecord').removeClass('disBtn');
                    recorder.pause();
                    clearInterval(timer);//清空倒计时
                }

            })
            $('#resumeRecord').click(function () {//录音恢复按钮点击 显示暂停按钮
                if ($(this).hasClass('disBtn') == false) {
                    $(this).addClass('disBtn');
                    $('#pauseRecord').removeClass('disBtn');
                    recorder.resume();
                    timer = setInterval(CountDown, 1000);//重新开始录音倒计时
                }
            })
            $('#endRecord').click(function () {//录音停止按钮点击 
                setRecorderFinish();
            })
            //录音停止
            function setRecorderFinish() {
                $('.recordHandleBox').hide();
                recorder.stop(function (blob) {//到达指定条件停止录音
                    console.log(blob)
                    recorder.close();//释放录音资源
                    clearInterval(timer);//清空倒计时
                    $('.countDown').text("还可录制5分")
                    maxtime = 5 * 60; // 录音倒计时五分钟
                    readBlobAsBase64(blob, function (dataurl) {
                        base64str = dataurl.split('base64,')[1];
                         console.log(base64str)
                        bolbSrc = (window.URL || webkitURL).createObjectURL(blob);
                        $('.audio').attr('src', (window.URL || webkitURL).createObjectURL(blob));
                        var Finish = decideFinish();
                        if (Finish == true) {
                            $('.commit').addClass('abled')//提交按钮高亮
                            $('.progressCommit').addClass('activeProgress');
                            $('.curQuesTionNum').addClass('activeItem');//做题目时高亮
                        } else {
                            if ($('.anwerImg ').hasClass('anwesChecked')) {
                                $('.curQuesTionNum').addClass('activeItem');//做题目时高亮
                            }
                        }
                        console.log(base64str)
                    });

                }, function (msg) {
                    console.log("录音失败:" + msg);
                });
            }
            // 把blob对象转换为Base64
            function readBlobAsBase64(blob, callback) {
                var a = new FileReader();
                a.onload = function (e) { callback(e.target.result); };
                a.readAsDataURL(blob);
            }
           

        })

    </script>
</body>
</html>
